<template>
  <div class="star-box">
    <div class="score-star">
      <template v-for="(item,index) in starArray /*[1,1,1,0,0]*/">
        <img v-if="item == 1" src="../assets/images/star.png" :key="index"/>
        <img v-else src="../assets/images/no-star.png" :key="item"/>
      </template>
    </div>
   <div class="score">
      {{rating}}
    </div>
  </div>
</template>
<script>
/**
 * 调用方用法如下： 
  <Star rating="5"/>
  <Star :rating="score"/>
 */
export default {
  name:"Star",
  props: ['rating'],
  setup(props){
	  const getStars = (score)=>{
        let stars = []
        for (let index = 1; index <= 5; index++) {
            stars.push(index <= score ? 1 : 0)
        }
        return stars
      }
      const starArray = getStars(props.rating)
	  return {
		  starArray
	  }
  }
  
}


</script>
<style lang="stylus" scoped>
.star-box {
  display: flex;
  align-items: center;
}
.score-star {
  display: flex;
  align-items: center;
}
img {
  width: 10px;
  height: 10px;
}

.score {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

</style>
